<template>
	<view class="content">
		<image class="back" src="/static/indexBack.png"></image>
		<view class="">
			<search></search>
			<view class="recommend">
				我们的推荐
			</view>
			<pc-turns class="carousel" @achieve="achieve" />
		</view>
		<view class="">
			<scroll-view class="category-scroll" scroll-x="true">
				<view class="category-pill" v-for="(item, index) in categoryList" :key="index">
					{{item.category_name}}
				</view>
			</scroll-view>
		</view>
		<view class="hot">
			<view class="hotTitle">
				热销推荐
			</view>
			<view class="book">
				<view class="itemBook" v-for="item in apparelList.slice(0,6)" @click="toDetail(item.product_id)">
					<image :src="'http://localhost:3000/' + item.product_picture" mode="widthFix"></image>
					<view class="">
						{{item.product_name}}
					</view>
				</view>
			</view>
		</view>
		<view class="hot">
			<view class="hotTitle">
				新书速递
			</view>
			<scroll-view class="scroll-view_H2" scroll-x="true" scroll-with-animation="false">
				<view class="scroll-view-item_H2" v-for="item in makeupList" @click="toDetail(item.product_id)">
					<image :src="'http://localhost:3000/' + item.product_picture" mode="widthFix"></image>
					<view class="">
						{{item.product_name}}
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import carousel from "/uni_modules/pc-turns/components/pc-turns/pc-turns.vue"
	import search from "/components/search/search.vue"
	export default {
		data() {
			return {
				data: [{
					src: '/static/1.png',
					title: '111111'
				}, {
					src: '/static/1.png',
					title: '111111'
				}, {
					src: '/static/1.png',
					title: '111111'
				}],
				snackList: [],
				apparelList: [],
				makeupList: [],
				categoryList: []
			}
		},
		components() {
			carousel,
			search
		},
		onLoad() {
			this.getPersonalizedRecommendation()
			this.getNewArrivals()
			this.getPopularBooks()
			this.getCategory()
		},
		methods: {
			achieve(open) {
				// open = {src:'图片路径地址'}
				console.log(open)
			},
			getCategory() {
				uni.request({
					url: 'http://localhost:8081/api/product/getCategory',
					method: 'POST',
					data: {},
					success: (res) => {
						const val = {
							category_id: 0,
							category_name: "全部"
						};
						const cate = res.data.category;
						cate.unshift(val);
						this.categoryList = cate;
					},
					fail: (err) => {
						console.error("获取分类失败:", err);
						uni.showToast({
							title: '获取分类失败',
							icon: 'none'
						});
					}
				});
			},
			getPersonalizedRecommendation() {
				uni.request({
					url: 'http://localhost:8081/api/product/getPersonalizedRecommendations',
					method: 'POST',
					data: {
						limit: 8,
						algorithm: 'random'
					},
					success: (res) => {
						if (res.data.code === '001') {
							this.snackList = res.data.recommendations.map(item => ({
								// ...item,
								src: 'http://localhost:3000/' + item.product_picture,
								title: item.product_name,
								// rating: (Math.random() * 2 + 3).toFixed(1)
							}));
						}
					},
					fail: (err) => {
						console.error("获取个性化推荐失败:", err);
						uni.showToast({
							title: '获取推荐数据失败',
							icon: 'none'
						});
					}
				});
			},
			getNewArrivals() {
				uni.request({
					url: 'http://localhost:8081/api/product/getPersonalizedRecommendations',
					method: 'POST',
					data: {
						limit: 10,
						algorithm: 'new-arrivals'
					},
					success: (res) => {
						if (res.data.code === '001') {
							this.makeupList = res.data.recommendations;
						}
					},
					fail: (err) => {
						console.error("获取新书速递失败:", err);
						uni.showToast({
							title: '获取新书速递数据失败',
							icon: 'none'
						});
					}
				});
			},
			getPopularBooks() {
				uni.request({
					url: 'http://localhost:8081/api/product/getPersonalizedRecommendations',
					method: 'POST',
					data: {
						limit: 10,
						algorithm: 'popular'
					},
					success: (res) => {
						if (res.data.code === '001') {
							this.apparelList = res.data.recommendations;
						}
					},
					fail: (err) => {
						console.error("获取热门榜单失败:", err);
						uni.showToast({
							title: '获取热门榜单数据失败',
							icon: 'none'
						});
					}
				});
			},
			toDetail(id) {
				uni.navigateTo({
					url: "/pages/details/details?id=" + id
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.content {
		width: 100vw;
		overflow: hidden;
		position: relative;
	}

	.back {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		width: calc(482rpx * 2);
		height: calc(482rpx * 2);
		top: -8%;
		z-index: -1;
	}

	.recommend {
		padding: 0 5%;
		margin-bottom: 3%;
		font-size: 45rpx;
		color: #fff;
		letter-spacing: 2rpx;
		font-weight: bold;
	}

	.carousel {
		transform: scale(0.9);
	}

	.scroll-view_H {
		margin-top: 100rpx;
		white-space: nowrap;
		width: 100%;
		margin-left: 20rpx;
	}

	.scroll-view-item_H {
		display: inline-block;
		width: 128rpx;
		height: 128rpx;
		text-align: center;
		margin-right: 20rpx;
		position: relative;
		border-radius: 100%;
		overflow: hidden;
	}

	.hot {
		margin: 5%;

		.hotTitle {
			color: #242126;
			font-size: 50rpx;
			font-weight: bold;
			padding: 10rpx 0;
		}

		.book {
			display: flex;
			justify-content: space-around;
			flex-wrap: wrap;
		}

		.itemBook {
			margin-top: 20rpx;
			width: 202rpx;
			border-radius: 20rpx;
			min-height: 308rpx;

			image {
				width: 100%;
				// height: 100%;
			}
		}
	}

	.scroll-view_H2 {
		margin-top: 10rpx;
		white-space: nowrap;
		width: 100%;
		margin-left: 20rpx;
	}

	.scroll-view-item_H2 {
		display: inline-block;
		width: 282rpx;
		height: 348rpx;
		text-align: center;
		margin-right: 20rpx;
		position: relative;
		overflow: hidden;
		border-radius: 20rpx;

		image {
			width: 100%;
		}
	}

	.category-scroll {
		padding: 100rpx 0;
		padding-bottom: 0;
		white-space: nowrap;
	}

	.category-pill {
		display: inline-block;
		padding: 12rpx 30rpx;
		margin: 0 10rpx;
		border-radius: 40rpx;
		background: linear-gradient(135deg, #f5f7fa, #e4e8eb);
		font-size: 28rpx;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
	}
</style>